<template>
  <div class="wrap">
    <CHeader content="企业双重预防管理" />
    <div class="echarts_box_wrap">
      <EchartsComponent title="辖内企业接入数量" :taskArray="accessQuantity" />
      <EchartsComponent title="当前安全巡检任务" :showTitle="true" :hideWord="true" :taskArray="InspectionTasks" />
      <EchartsComponent title="当前隐患排查任务" :hideWord="true" :taskArray="TroubleshootingTasks" />
    </div>
    <div class="wrap_center">
      <div class="card">
        <div class="card_header">
          <div class="header_left">
            信息快报
          </div>
          <div class="header_right">
            <span class="header_update">更新</span>
            <img src="@/assets/images/header/icon_more.png" alt="">
          </div>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="content"
            label="主要内容"
            width="280"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="有关单位"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="信息时间">
          </el-table-column>
        </el-table>
      </div>
      <el-row class="card_right">
        <div>
          <div class="card_header">
            <el-select v-model="value" placeholder="区县选择" class="common_select">
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.name"
                :value="item.label">
              </el-option>
            </el-select>
            <el-select v-model="value1" placeholder="月度选择" class="common_select">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div id="canvas" style="height: 230px;width: 100%;margin-left: 17px;margin-top: 23px"></div>
        </div>
        <div style="display: flex;flex-direction: column;margin-top: 30px">
          <boxData title="重大隐患"                                      :finishData="finishData" />
          <boxData title="一般隐患" :id="2" :isDanger="true" :finishData="finishData1" />
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import EchartsComponent from "@/components/echarts/echarts";
import boxData from "@/components/BoxData/BoxData";
import * as echarts from "echarts";
import { requestPost ,requestGet} from "@/network/request";

export default {
  name: "scyfglsy",
  components: {
    CHeader,
    EchartsComponent,
    boxData
  },
  data() {
    return {
      accessQuantity: [{
        total_sum: 100,
        id: "id_1",
        rate: "0%",
        already_finish: "已接入企业",
        no_finish: "未接入企业",
        chars_title: "接入率",
        data_array: []
      }],
      InspectionTasks: [{
        total_sum: 120,
        id: "id_2",
        rate: "94%",
        already_finish: "巡检已完成",
        no_finish: "巡检进行中",
        chars_title: "完成率",
        data_array: []
      }],
      TroubleshootingTasks: [{
        total_sum: 120,
        id: "id_3",
        rate: "93%",
        already_finish: "排查已完成",
        no_finish: "排查进行中",
        chars_title: "完成率",
        data_array: [{
          id: "1",
          area: "洪泽区",
          status: "已完成",
          status_num: "123",
          process: "进行中",
          process_num: "123",
          finish_rate: "完成率 25%"
        }]
      }],
    tableData: [],
    options: [],
    options1: [{
        value: "1",
        label: "1月"
      }, {
        value: "2",
        label: "2月"
      }, {
        value: "3",
        label: "3月"
      }, {
        value: "4",
        label: "4月"
      }, {
        value: "5",
        label: "5月"
      },{
        value: "6",
        label: "6月"
      },{
        value: "7",
        label: "7月"
      },{
        value: "8",
        label: "8月"
      },{
        value: "9",
        label: "9月"
      },{
        value: "10",
        label: "10月"
      },{
        value: "11",
        label: "11月"
      },{
        value: "12",
        label: "12月"
      }],
      value: "",
      value1: "",
      finishData: {
        already_num: 0,
        noDo_num: 0,
        do_rate: "0%",
        total: 0
      },
      finishData1: {
        already_num: 0,
        noDo_num: 0,
        do_rate: "0%",
        total:0
      }
    };
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      requestPost("wwyt/scyfglsy/yhpclbTj",{}).then(res=>{
    if(res.code == 200  && res.data.length > 0){
      var ybdata=[];
      var zddata=[];
      for(var i=0;i<res.data.length;i++){
        ybdata.push(res.data[i].yb);
        zddata.push(res.data[i].zd);
      }
        let option = {
        color: ["#F6D203", "#F4686D"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          type: "plain",
          left: "right",
          icon: "rect",
          data: ["一般隐患", "重大隐患"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick: {		//x轴刻度线
            show: false
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "一般隐患",
            type: "line",
            stack: "Total",
            data: ybdata
          },
          {
            name: "重大隐患",
            type: "line",
            stack: "Total",
            data: zddata
          }
        ]
      };
      echarts.init(document.getElementById(`canvas`)).setOption(option);
      }})
    },
    getTableData(){
      this.tableData = [];
      requestPost("/wwyt/scyfglsy/yhxx",{}).then(res=>{
        if(res.code==200&&res.data.length>0){
          this.tableData=res.data;
        }
      })
      },
      getAreaName(){
      requestGet("/manageArea/selectAreaName").then(res=>{
        if(res.code==200&&res.data.length>0){
          this.options=res.data;
        }
      })
    },
    getYhzg(){
      requestPost("/wwyt/scyfglsy/yhpczgTj",{area_code:this.value,month:this.value1}).then(res=>{
        if(res.code==200&&res.data.length>0){
          this.finishData1.already_num=res.data[0].ybzg;
          this.finishData1.noDo_num=res.data[0].ybwzg;
          this.finishData1.do_rate=res.data[0].ybpercent;
          this.finishData1.total=res.data[0].ybsum;
          this.finishData.already_num=res.data[0].zdzg;
          this.finishData.noDo_num=res.data[0].zdwzg;
          this.finishData.do_rate=res.data[0].zdpercent;
          this.finishData.total=res.data[0].zdsum;
        }
      })
    },
    companyReceiveTj(){
      requestPost("/wwyt/scyfglsy/companyReceiveTj",{}).then(res=>{
        if(res.code==200&&res.data.length>0){
          this.accessQuantity[0].data_array=res.data;
        }
      })
    },
    yhpcWorkTj(){
      requestPost("/wwyt/scyfglsy/yhpcWorkTj",{}).then(res=>{
        if(res.code==200&&res.data.length>0){
          this.InspectionTasks[0].data_array=res.data;
        }
      })
    },
    echartData(){
      requestPost("/wwyt/scyfglsy/echartData",{}).then(res=>{
        if(res.code==200&&res.data.length>0){
          if(res.data[0].jrcount==0&&res.data[0].wjrcount==0){
            this.accessQuantity[0].rate="0%";
          }else{
            this.accessQuantity[0].rate=`${((res.data[0].jrcount/(res.data[0].jrcount+res.data[0].wjrcount))*100).toFixed(2)}%`;
          }
          this.accessQuantity[0].total_sum=res.data[0].jrcount+res.data[0].wjrcount;
          if(res.data[0].wccount==0&&res.data[0].wwccount==0){
            this.InspectionTasks[0].rate="0%";
          }else{
            this.InspectionTasks[0].rate=`${((res.data[0].wccount/(res.data[0].wccount+res.data[0].wwccount))*100).toFixed(2)}%`;
          }
          this.InspectionTasks[0].total_sum=res.data[0].wccount+res.data[0].wwccount;
        }
      })
    },
  },
  
  created(){
    this.getTableData();
    this.getAreaName();
    this.getYhzg();
    this.companyReceiveTj();
    this.yhpcWorkTj();
    this.echartData();
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 70px;
  text-align: left;
  background-color: rgb(243, 245, 251);

  .echarts_box_wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .wrap_center {
    display: flex;
    align-items: center;

    .card {
      width: 636px;
      height: 366px;
      margin: 0 23px 0 20px;

      .card_header {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(90deg, #6AA5FF 0%, #9FC9FC 100%);

        .header_left {
          padding-left: 20px;
          font-size: 20px;
          color: #fff;
        }

        .header_right {
          display: flex;
          align-items: center;
          margin-right: 20px;

          .header_update {
            margin-right: 20px;
            font-size: 14px;
            color: #FFFFFF;
          }
        }
      }
    }

    .card_right {
      display: flex;
      justify-content: space-between;
      flex: 1;
      height: 366px;
      background: #FFFFFF;
      margin-right: 20px;
      box-shadow: 1px 0 14px 0 rgba(116, 118, 138, 0.1600);
      border-radius: 6px;
    }
  }

  .common_select {
    width: 145px;
    height: 32px;
    margin: 21px 19px 0 20px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1300px) {
  .card{
    width: 400px;
  }
}
</style>